<!-- Created by mhy on 2018/6/27.

 -->
<template>
  <div class="frame-index">
    <div class="frame-content">

      <div class="frame-left">
        <div class="f-title">
          筛选
          <div @click="$router.back()">&lt;-</div>
        </div>
        <form class="frame-left-search" action="#">
          <input class="frame-search-input"  type="search"
                 placeholder="搜索 商户ID/手机/设备ID"
                 @keydown.enter="searchData"
                 v-model="inputSearch">
        </form>
        <div class="frame-left-dist"></div>

        <x-select-option v-model="value1" :options="options1" title="厂家" class="m-mb-10" @change="changeSearch(1)"/>
        <x-select-option v-model="value2" :options="options2" title="色系" class="m-mb-10" @change="changeSearch(2)"/>
        <x-select-option v-model="value4" :options="options4" title="付费类型" class="m-mb-10" @change="changeSearch(4)"/>
        <x-select-option v-model="value5" :options="options5" title="状态" class="m-mb-10" @change="changeSearch(5)"/>
        <div class="block-item">
          <div class="block-im">
            <div class="pm">2019年新款卡纸</div>
            <div class="ph">loralisa洛卡丽萨，欢迎各位商户体验，6折优惠抢购</div>
          </div>
          <div class="block-it"></div>
        </div>
      </div>

      <div class="frame-right">
        <div class="x-frame-title">
          <div class="x-frame-title-text">卡纸素材库</div>
        </div>
        <div class="frame-right-header">
          <p class="frame-right-title">搜索</p>
          <div class="frame-right-search" v-show="inputSearch2.length > 0">
            <p class="frame-right-search-title">{{inputSearch2}}</p>
            <img class="" src="xxx.png" @click="research">
          </div>
          <p class="frame-right-search-content" v-for="(item,index) in searchList" :key="index">{{item}}</p>
          <p class="frame-right-allitems">共{{matcardCount}}个</p>
        </div>
        <div class="frame-right-dist"></div>
        <div class="frame-right-list">
          <x-materia-detail-item2 v-for="(item, key) in matcardList" :item="item" :key="key" @click.native="showDetail(item)"/>
        </div>
        <div class="frame-right-dist-1"></div>

        <div class="frame-right-footer" style="margin-bottom: 100px;">
          <p class="frame-right-footer-txt" @click="addPage">上一页</p>
          <p class="frame-right-footer-txt">{{pageIndex}} / {{Math.ceil(this.matcardCount / this.pageSize)}}</p>
          <p class="frame-right-footer-txt" @click="minusPage">下一页</p>
          <input class="frame-right-page-input" v-model.number="pageIndex" type="number"  onkeyup="value=value.replace(/[^\d]/g,'')">
          <p class="frame-right-footer-search" @click="toPage">跳转</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import {mapActions,mapState} from 'vuex'
  export default {
    data() {
      return{
        inputSearch:'',
        inputSearch2:'',
        searchList:[],
        value1: '0',
        value2: '0',
        value4: '0',
        value5: '0',
        options1:this.$store.state.login.factoryOptionsSelect,
        options2:[{value: '0', label: '全部'},{value: '1', label: '红色'},{value: '2', label: '黄色'},{value: '3', label: '绿色'}],
        options4: [{value: '0', label: '全部'},{value: '1', label: 'VIP'},{value: '2', label: '免费'}],
        options5:[{value: '0', label: '全部'},{value: '1', label: '上架'},{value: '2', label: '下架'}],
        pageIndex: 1,
        pageSize: 5,
      }
    },
    components:{

    },
    methods: {
      ...mapActions([
        'getMatcardList'
      ]),
      research () {
        this.inputSearch = ''
        this.inputSearch2 = ''
        this.searchFrame()
      },

      addPage () {
        if (this.page <= 1) {
          return this.$dialog.toast({mes: '页码不存在', timeout: 1000})
        }
        this.pageIndex -= 1
        this.searchFrame()
      },
      minusPage () {
        if (this.page >= Math.ceil(this.matcardCount / this.pageSize)) {
          return this.$dialog.toast({mes: '页码不存在', timeout: 1000})
        }
        this.pageIndex += 1
        this.searchFrame()
      },
      toPage (page) {
        if (page < 1) {
          return this.$dialog.toast({mes: '页码不存在', timeout: 1000})
        } else if (page > Math.ceil(this.matcardCount / this.pageSize)) {
          return this.$dialog.toast({mes: '页码不存在', timeout: 1000})
        }
        this.pageIndex = Number(document.getElementById('pageinput').value)
        this.searchFrame()
      },
      changeSearch(index){
        this.searchList.length = 0
        if(this.value1 != '0'){
          this.searchList.push(this.options1[Number(this.value1)].label)
        }
        if(this.value2 != '0'){
          this.searchList.push(this.options2[Number(this.value2)].label)
        }

        if(this.value4 != '0'){
          this.searchList.push(this.options4[Number(this.value4)].label)
        }
        if(this.value5 != '0'){
          this.searchList.push(this.options5[Number(this.value5)].label)
        }
        this.pageIndex = 1;
        this.searchFrame()
      },
      searchData (e) {
        this.inputSearch2 = this.inputSearch.trim()
        this.pageIndex = 1
        this.searchFrame()
        e.preventDefault()
      },
      handleCurrentChange (page) {
        this.loadDataList(page)
      },
      searchFrame() {
        let params = {action:"getlist",page:this.pageIndex,pagesize:this.pageSize};
        if(this.value1 != '0'){
          params["factory"] = this.options1[Number(this.value1)].factoryid
        }
        if(this.value2 != '0'){
          params["color"] = this.options2[Number(this.value2)].label
        }

        if(this.value4 != '0'){
          params["paytype"] = this.options4[Number(this.value4)].label
        }
        if(this.value5 != '0'){
          params["state"] = this.options5[Number(this.value5)].label
        }
        if(this.inputSearch2.length > 0){
          params['search'] = this.inputSearch2
        }
        this.getMatcardList(params);
      },
      showDetail (item) {
        this.$router.push({
          path: '/outCardmaterial/detail',
          query: {
            id: item.id
          }
        })
      },
      loadDataList (page) {
        this.page = page
      }
    },
    computed: {
      ...mapState({
        factoryOptionsSelect: state => state.login.factoryOptionsSelect,
        matcardList: state => state.material.matcardList,
        matcardCount: state => state.material.matcardCount,
      }),
//        searchList () {
//          return [this.regist, this.state, this.charge].map(val => {
//            if (val) {
//              return this.typeObj[val]
//            }
//          })
//        }
    },
    mounted (){
      let params = {action:"getlist",page:this.pageIndex,pagesize:this.pageSize};
      this.getMatcardList(params);
    }
  }
</script>

<style scoped lang="scss">
  @import './material.scss';
</style>
